<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩表</title>
    <!--2 引入element ui css样式-->
    <!--2.1 引入element ui-->
    <link rel="stylesheet" href="../../public/element-ui/index.css">
    <style>
        .el-collapse-item__header {
            background-color: whitesmoke;
        }
    </style>
</head>
<body>
<!--3 创建div容器,挂载vue实例-->
<div id="app">
    <el-card class="box-card">
        <template v-for="(item,index) in tableData" :key="index">
            <el-collapse>
                <el-collapse-item>
                    <template slot="title">
                        <i class="el-icon-trophy" style="margin-left: 10px ;margin-right: 5px"></i>
                        <div >通告{{index+1}}&nbsp;来自裁判员：{{item.author}}</div>
                    </template>
                    <template slot="name">{{item.id}}</template>
                    <el-card class="box-card">
                        <div>比赛项目名称：{{item.comment}}</div>
                    </el-card>
                    <div style="float: right"><h6 style="color: red">获奖情况：{{item.score}}</h6></div>
                </el-collapse-item>
            </el-collapse>
        </template>
    </el-card>
</div>

<!--1 从本地引入js库 锁定版本-->
<!--1.1 引入vue-->
<script src="../../public/vue/vue.min.js"></script>
<!--1.2 引入element ui-->
<script src="../../public/element-ui/index.js"></script>
<!--1.3 引入 axios-->
<script src="../../public/axios/axios.min.js"></script>
<!--1.4 引入 自定义js包-->
<script src="../../public/mx-config.js"></script>

<script>
    //4 创建vue实例
    const app = new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],
            }
        },
        mounted: function () {
            this.initTable()
        },
        methods: {
            initTable: function () {
                axios.get("/scoreList").then(res => {
                    if (res.status == '200') {
                        this.tableData = res.data;
                        console.log(this.tableData)
                    } else {
                        console.log('get error')
                    }
                })
            }
        }
    });

</script>
</body>
</html>